<template>
    <el-form id="change-psw" ref="formData" label-position="left" label-width="80px" :model="formData" :rules="validatorRules">
        <el-form-item label="旧密码" prop="oldPsw" >
            <el-input v-model="formData.oldPsw" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPsw">
            <el-input v-model="formData.newPsw" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPsw2">
            <el-input v-model="formData.newPsw2" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="btn-bar">
            <el-button type="primary" @click="onSave">保存</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import Md5 from 'js-md5'
export default {
    data(){
        return{
            formData:{
                oldPsw:'',
                newPsw:'',
                newPsw2:'',
            },
            validatorRules:{
                oldPsw:[
                    {required: true, message: '请输入旧密码', trigger: 'change'},
                    {min: 6, message: '不少于6位', trigger: 'change'},
                ],
                newPsw:[
                    {required: true, message: '请输入新密码', trigger: 'change'},
                    {min: 6, message: '不少于6位', trigger: 'blur'},
                ],
                newPsw2:[
                    {required: true, message: '请再次输入新密码', trigger: 'change'},
                    { validator: this.checkNewPsw2, trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
        onSave(){
            var _this=this
            var isValidate=false
            this.$refs.formData.validate((bool)=>{
                if(bool){
                    isValidate=true
                }
            })
            if(!isValidate){return}
            var submitData={
                oldPassword:Md5(this.formData.oldPsw),
                newPassword:Md5(this.formData.newPsw2),
                userId:this.$store.state.user.id
            }
            
            this.$http.changePsw(submitData)
            .then((res)=>{
                this.$confirm('密码修改成功，是否重新登陆?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$router.push("/login")
                }).catch(()=>{
                    _this.$emit("closeDialog")
                })
            }).catch((err)=>{
                 this.$message.success("修改密码失败!")
                throw(err)
            })
        },

        checkNewPsw2(rule, value, callback){
            if(value.length<6){
                callback(new Error('不少于6位!'));
            }else if (value !== this.formData.newPsw) {
                callback(new Error('两个新密码输入不一致!'));
            } else {
                callback();
            }
        }
    }
}
</script>
<style lang="scss" scoped>
#change-psw{
    height: 100%;
    .el-form-item{
        margin: 0px auto;
        margin-bottom: 20px;
        width: 60%;
    }
    .btn-bar{
        text-align: center;
        .el-button{
            width:70%;
        }
    }
}
</style>


